<template>
  <div class="aother_range">
    <div class="aother_top_title">
      <span>🎖️作者榜</span>
    </div>
    <div class="aother_body_person" v-for="i in 3" :key="i">
      <img
        class="aother_body_person_headImg"
        src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/7ae35f3463178b2531859ff8d4bcf765~300x300.image"
        alt=""
      />
      <div class="aother_body_person_right">
        <div class="aother_body_person_right_top">
          <span>浩会海</span>
          <img
            src="//sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/e108c685147dfe1fb03d4a37257fb417.svg"
            alt=""
          />
        </div>
        <span class="desc">公众号：小何乘醉</span>
      </div>
    </div>
    <div class="moreAother" @click="toAllRange">完整榜单 ></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  watch: {},
  computed: {},
  methods: {
    toAllRange () {
      console.log("作者完整榜");
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped>
// 排行榜
.aother_range {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .aother_top_title {
    display: flex;
    align-items: center;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
  }
  .aother_body_person {
    display: flex;
    align-items: center;
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      background-color: hsla(0, 0%, 84.7%, 0.1);
    }
    .aother_body_person_headImg {
      flex: 0 0 auto;
      width: 3.8rem;
      height: 3.8rem;
      border-radius: 50%;
      margin-right: 0.7rem;
    }
    .aother_body_person_right_top {
      display: flex;
      align-items: center;
      font-size: 1.3rem;
      font-weight: 400;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
      img {
        font-size: 1.3rem;
        font-weight: 400;
        color: #333;
        margin-left: 4px;
      }
    }
    .aother_body_person_right .desc {
      color: #909090;
      font-size: 1rem;
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .moreAother {
    color: #007fff;
    padding: 1rem 0;
    text-align: center;
    border-top: 1px solid hsla(0, 0%, 59.2%, 0.1);
    cursor: pointer;
    font-size: 1.3rem;
  }
}
</style>